<!-- eslint-disable vue/no-use-v-if-with-v-for -->
<!-- eslint-disable vue/valid-v-slot -->
<template>
  <div class="main-container">
    <TableBody>
      <template #header>
        <TableHeader ref="tableHeaderRef" :show-filter="false">
          <template #search-content>
            <a-form ref="serchForm" :model="form">
              <a-row :gutter="24">
                <a-col :span="4">
                  <a-form-item field="addCard" hide-label>
                    <a-input-group style="width: 100%">
                      <a-select
                        style="width: 50%"
                        @change="typeFn"
                        v-model="type"
                        placeholder="first"
                      >
                        <a-option v-for="item in typeLists" :key="item.name" :value="item.value">{{
                          item.name
                        }}</a-option>
                      </a-select>
                      <a-input style="width: 50%" v-model="typeText" placeholder="请输入搜索条件"
                        ><template #suffix>
                          <icon-plus @click="opens(0)" style="cursor: pointer" /> </template
                      ></a-input>
                    </a-input-group>
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="userId" hide-label>
                    <a-select
                      v-model="form.userId"
                      placeholder="请选择客户"
                      allow-clear
                      allow-search
                      :options="userList"
                      :virtual-list-props="{ height: 200 }"
                  /></a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="payTemplateId" hide-label>
                    <a-select
                      v-model="form.payTemplateId"
                      placeholder="请选择支付模板"
                      allow-clear
                      allow-search
                    >
                      <a-option v-for="item in templateS" :key="item.id" :value="item.id">{{
                        item.name
                      }}</a-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="type" hide-label>
                    <a-select v-model="form.type" placeholder="请选择提现途径" allow-clear>
                      <a-option :value="0">支付宝</a-option>
                      <a-option :value="1">微信</a-option>
                      <a-option :value="2">银行卡</a-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="states" hide-label>
                    <a-select
                      v-model="form.states"
                      multiple
                      :max-tag-count="1"
                      placeholder="请选择提现状态"
                      allow-clear
                    >
                      <a-option :value="0">等待审核</a-option>
                      <a-option :value="1">正在审核</a-option>
                      <a-option :value="2">审核通过</a-option>
                      <a-option :value="3">审核驳回</a-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="manual" hide-label>
                    <a-select v-model="form.manual" placeholder="请选择打款方式" allow-clear>
                      <a-option :value="1">手动处理</a-option>
                      <a-option :value="0">自动打款</a-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="addTime" hide-label>
                    <a-date-picker
                      v-model="form.addTime"
                      style="width: 100%"
                      show-time
                      placeholder="请选择开始提现时间"
                      :time-picker-props="{ defaultValue: '12:00:00' }"
                      format="YYYY-MM-DD HH:mm:ss"
                      allow-clear
                      :shortcuts="[
                        {
                          label: '今日',
                          value: () => (
                            (form.addTime = $dayjs('00:00:00', 'HH:mm:ss').format(
                              'YYYY-MM-DD HH:mm:ss'
                            )),
                            (form.endTime = $dayjs('23:59:59', 'HH:mm:ss').format(
                              'YYYY-MM-DD HH:mm:ss'
                            ))
                          ),
                        },
                        {
                          label: '昨日',
                          value: () => (
                            (form.addTime = $dayjs('00:00:00', 'HH:mm:ss')
                              .subtract(1, 'day')
                              .format('YYYY-MM-DD HH:mm:ss')),
                            (form.endTime = $dayjs('23:59:59', 'HH:mm:ss')
                              .subtract(1, 'day')
                              .format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                        {
                          label: '七日',
                          value: () => (
                            (form.addTime = $dayjs('00:00:00', 'HH:mm:ss')
                              .subtract(6, 'day')
                              .format('YYYY-MM-DD HH:mm:ss')),
                            (form.endTime = $dayjs().format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                        {
                          label: '本月',
                          value: () => (
                            (form.addTime = $dayjs('01 00:00:00', 'DD HH:mm:ss').format(
                              'YYYY-MM-DD HH:mm:ss'
                            )),
                            (form.endTime = $dayjs().format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                        {
                          label: '上月',
                          value: () => (
                            (form.addTime = $dayjs(`01 00:00:00`, 'DD HH:mm:ss')
                              .subtract(1, 'month')
                              .format('YYYY-MM-DD HH:mm:ss')),
                            (form.endTime = $dayjs()
                              .subtract(1, 'month')
                              .endOf('month')
                              .format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                      ]"
                    />
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="endTime" hide-label>
                    <a-date-picker
                      v-model="form.endTime"
                      style="width: 100%"
                      show-time
                      placeholder="请选择结束提现时间"
                      :time-picker-props="{ defaultValue: '12:00:00' }"
                      format="YYYY-MM-DD HH:mm:ss"
                      allow-clear
                      :shortcuts="[
                        {
                          label: '今日',
                          value: () => (
                            (form.addTime = $dayjs('00:00:00', 'HH:mm:ss').format(
                              'YYYY-MM-DD HH:mm:ss'
                            )),
                            (form.endTime = $dayjs('23:59:59', 'HH:mm:ss').format(
                              'YYYY-MM-DD HH:mm:ss'
                            ))
                          ),
                        },
                        {
                          label: '昨日',
                          value: () => (
                            (form.addTime = $dayjs('00:00:00', 'HH:mm:ss')
                              .subtract(1, 'day')
                              .format('YYYY-MM-DD HH:mm:ss')),
                            (form.endTime = $dayjs('23:59:59', 'HH:mm:ss')
                              .subtract(1, 'day')
                              .format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                        {
                          label: '七日',
                          value: () => (
                            (form.addTime = $dayjs('00:00:00', 'HH:mm:ss')
                              .subtract(6, 'day')
                              .format('YYYY-MM-DD HH:mm:ss')),
                            (form.endTime = $dayjs().format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                        {
                          label: '本月',
                          value: () => (
                            (form.addTime = $dayjs('01 00:00:00', 'DD HH:mm:ss').format(
                              'YYYY-MM-DD HH:mm:ss'
                            )),
                            (form.endTime = $dayjs().format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                        {
                          label: '上月',
                          value: () => (
                            (form.addTime = $dayjs(`01 00:00:00`, 'DD HH:mm:ss')
                              .subtract(1, 'month')
                              .format('YYYY-MM-DD HH:mm:ss')),
                            (form.endTime = $dayjs()
                              .subtract(1, 'month')
                              .endOf('month')
                              .format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                      ]"
                    />
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="addHandlerTime" hide-label>
                    <a-date-picker
                      v-model="form.addHandlerTime"
                      style="width: 100%"
                      show-time
                      placeholder="请选择开始处理时间"
                      :time-picker-props="{ defaultValue: '12:00:00' }"
                      format="YYYY-MM-DD HH:mm:ss"
                      allow-clear
                      :shortcuts="[
                        {
                          label: '今日',
                          value: () => (
                            (form.addHandlerTime = $dayjs('00:00:00', 'HH:mm:ss').format(
                              'YYYY-MM-DD HH:mm:ss'
                            )),
                            (form.endHandlerTime = $dayjs('23:59:59', 'HH:mm:ss').format(
                              'YYYY-MM-DD HH:mm:ss'
                            ))
                          ),
                        },
                        {
                          label: '昨日',
                          value: () => (
                            (form.addHandlerTime = $dayjs('00:00:00', 'HH:mm:ss')
                              .subtract(1, 'day')
                              .format('YYYY-MM-DD HH:mm:ss')),
                            (form.endHandlerTime = $dayjs('23:59:59', 'HH:mm:ss')
                              .subtract(1, 'day')
                              .format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                        {
                          label: '七日',
                          value: () => (
                            (form.addHandlerTime = $dayjs('00:00:00', 'HH:mm:ss')
                              .subtract(6, 'day')
                              .format('YYYY-MM-DD HH:mm:ss')),
                            (form.endHandlerTime = $dayjs().format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                        {
                          label: '本月',
                          value: () => (
                            (form.addHandlerTime = $dayjs('01 00:00:00', 'DD HH:mm:ss').format(
                              'YYYY-MM-DD HH:mm:ss'
                            )),
                            (form.endHandlerTime = $dayjs().format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                        {
                          label: '上月',
                          value: () => (
                            (form.addHandlerTime = $dayjs(`01 00:00:00`, 'DD HH:mm:ss')
                              .subtract(1, 'month')
                              .format('YYYY-MM-DD HH:mm:ss')),
                            (form.endHandlerTime = $dayjs()
                              .subtract(1, 'month')
                              .endOf('month')
                              .format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                      ]"
                    />
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="endHandlerTime" hide-label>
                    <a-date-picker
                      v-model="form.endHandlerTime"
                      style="width: 100%"
                      show-time
                      placeholder="请选择结束处理时间"
                      :time-picker-props="{ defaultValue: '12:00:00' }"
                      format="YYYY-MM-DD HH:mm:ss"
                      allow-clear
                      :shortcuts="[
                        {
                          label: '今日',
                          value: () => (
                            (form.addHandlerTime = $dayjs('00:00:00', 'HH:mm:ss').format(
                              'YYYY-MM-DD HH:mm:ss'
                            )),
                            (form.endHandlerTime = $dayjs('23:59:59', 'HH:mm:ss').format(
                              'YYYY-MM-DD HH:mm:ss'
                            ))
                          ),
                        },
                        {
                          label: '昨日',
                          value: () => (
                            (form.addHandlerTime = $dayjs('00:00:00', 'HH:mm:ss')
                              .subtract(1, 'day')
                              .format('YYYY-MM-DD HH:mm:ss')),
                            (form.endHandlerTime = $dayjs('23:59:59', 'HH:mm:ss')
                              .subtract(1, 'day')
                              .format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                        {
                          label: '七日',
                          value: () => (
                            (form.addHandlerTime = $dayjs('00:00:00', 'HH:mm:ss')
                              .subtract(6, 'day')
                              .format('YYYY-MM-DD HH:mm:ss')),
                            (form.endHandlerTime = $dayjs().format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                        {
                          label: '本月',
                          value: () => (
                            (form.addHandlerTime = $dayjs('01 00:00:00', 'DD HH:mm:ss').format(
                              'YYYY-MM-DD HH:mm:ss'
                            )),
                            (form.endHandlerTime = $dayjs().format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                        {
                          label: '上月',
                          value: () => (
                            (form.addHandlerTime = $dayjs(`01 00:00:00`, 'DD HH:mm:ss')
                              .subtract(1, 'month')
                              .format('YYYY-MM-DD HH:mm:ss')),
                            (form.endHandlerTime = $dayjs()
                              .subtract(1, 'month')
                              .endOf('month')
                              .format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                      ]"
                    />
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item hide-label>
                    <a-input-group class="width100">
                      <a-input v-model="form.addAmount" placeholder="开始提现金额" />
                      <a-input v-model="form.endAmount" placeholder="结束提现金额" />
                    </a-input-group>
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item hide-label>
                    <a-input-group class="width100">
                      <a-input v-model="form.addServiceCharge" placeholder="开始手续费" />
                      <a-input v-model="form.endServiceCharge" placeholder="结束手续费" />
                    </a-input-group>
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item hide-label>
                    <a-input-group class="width100">
                      <a-input v-model="form.addWithholdingTax" placeholder="开始代扣税" />
                      <a-input v-model="form.endWithholdingTax" placeholder="结束代扣税" />
                    </a-input-group>
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item hide-label>
                    <a-input-group class="width100">
                      <a-input v-model="form.addReceiptBalance" placeholder="开始实际到账" />
                      <a-input v-model="form.endReceiptBalance" placeholder="结束实际到账" />
                    </a-input-group>
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="btns" hide-label>
                    <a-space :size="15">
                      <a-button
                        type="primary"
                        v-permission="withdrawalList"
                        html-type="submit"
                        @click="doRefresh(1)"
                        ><template #icon>
                          <icon-search />
                        </template>
                        <!-- Use the default slot to avoid extra spaces -->
                        <template #default>搜索</template></a-button
                      >
                      <a-button v-permission="withdrawalList" @click="resetSeach"
                        ><template #icon>
                          <icon-sync theme="outline" size="14" />
                        </template>
                        <!-- Use the default slot to avoid extra spaces -->
                        <template #default>重置</template></a-button
                      >
                    </a-space>
                  </a-form-item>
                </a-col>
              </a-row>
            </a-form>
          </template>
        </TableHeader>
      </template>
      <template #table-config>
        <a-space :size="15">
          <a-button
            type="outline"
            v-permission="withdrawalLists"
            status="warning"
            @click="exportLists"
            :loading="loading"
          >
            <template #default>导出</template>
          </a-button>
          <a-button type="outline" v-permission="handler" status="warning" @click="open({}, 1)">
            <template #default>批量处理</template>
          </a-button>
          <a-button type="outline" v-permission="handler" status="warning" @click="dakuan = true">
            <template #default>打款文件</template>
          </a-button>
        </a-space>
        <a-space :size="15">
          <TableConfig
            @update-border="onUpdateBorder"
            @update-striped="onUpdateStriped"
            @refresh="doRefresh"
          />
        </a-space>
      </template>
      <template #default>
        <a-table
          :bordered="{ wrapper: true, cell: tables.bordered }"
          :stripe="(tables.striped as boolean)"
          :loading="tableLoading"
          :data="table.dataList"
          :pagination="false"
          :column-resizable="true"
          :rowKey="rowKey"
          v-model:selectedKeys="selectedKeys"
          :row-selection="rowSelection"
          :columns="tableColumns.list"
          table-layout-fixed
          :scroll="scroll"
          :scrollbar="{ type: 'track', outerClass: '', outerStyle: '' }"
        >
          <template #columns>
            <a-table-column
              v-for="item of tableColumns.list"
              :key="item.key"
              align="left"
              :width="item.width"
              :ellipsis="true"
              :tooltip="true"
              :title="(item.title as string)"
              :data-index="(item.key as string)"
              :fixed="item.fixed"
            >
              <template v-if="item.key === 'userName'" #cell="{ record }">
                <span v-if="record.user">{{ record.user.userName }}</span>
                <span v-else>---</span>
              </template>
              <template v-if="item.key === 'amount'" #cell="{ record }">
                <span @click="detailFn(record)"> {{ record.amount }}</span>
              </template>
              <template v-if="item.key === 'type'" #cell="{ record }">
                <span v-if="record.type == 0">支付宝</span>
                <span v-if="record.type == 1">微信</span>
                <span v-if="record.type == 2">银行卡</span>
              </template>
              <template v-else-if="item.key === 'other'" #cell="{ record }">
                <span v-if="record.type == 2">{{ record.information }}</span>
                <a-image
                  v-else-if="record.information && record.show == true"
                  style="width: 20px; height: 100%"
                  :src="
                    urla +
                    '/app/file/download/private?path=' +
                    encodeURIComponent(record.information)
                  "
                />
                <a-image
                  v-else-if="record.information"
                  style="width: 20px; height: 100%"
                  :src="record.information"
                />
                <span v-else>- - -</span>
              </template>
              <template v-else-if="item.key === 'state'" #cell="{ record }">
                <a-tag v-if="record.state === 0">等待审核</a-tag>
                <a-tag color="gold" v-else-if="record.state === 1">正在审核</a-tag>
                <a-tag color="blue" v-if="record.state === 2">通过审核</a-tag>
                <a-tag color="red" v-else-if="record.state === 3">审核驳回</a-tag>
              </template>
              <template v-else-if="item.key === 'payTemplateId'" #cell="{ record }">
                <span v-if="!record.handlerTime">---</span>
                <span v-else>
                  <span v-if="record.payTemplateId">自动打款</span>
                  <span v-else>手动打款</span>
                </span>
              </template>
              <template v-else-if="item.key === 'userRemarks'" #cell="{ record }">
                <span v-if="record.userRemarks">{{ record.userRemarks }}</span>
                <span v-else>---</span>
              </template>
              <template v-else-if="item.key === 'handlerTime'" #cell="{ record }">
                <span v-if="record.handlerTime">{{ record.handlerTime }}</span>
                <span v-else>---</span>
              </template>
              <template v-else-if="item.key === 'adminRemarks'" #cell="{ record }">
                <span v-if="record.adminRemarks">{{ record.adminRemarks }}</span>
                <span v-else>---</span>
              </template>
              <template v-else-if="item.key === 'action'" #cell="{ record }">
                <a-button type="text" v-permission="handler" @click="open(record, 0)"
                  >处理提现</a-button
                >
              </template>
            </a-table-column>
          </template>
        </a-table>
      </template>
      <template #footer>
        <TableFooter ref="tableFooterRef" :pagination="pagination" />
      </template>
    </TableBody>
    <a-modal
      :mask-closable="false"
      @before-close="cancel"
      v-model:visible="showV"
      title="处理提现"
      width="600px"
      title-align="start"
    >
      <a-form ref="showRef" class="huakaClass" :model="detail" @submit="OK">
        <a-form-item field="state" label="处理状态">
          <a-radio-group class="radio-bcg" v-model="detail.state">
            <a-radio v-if="DFORM.state != 1" :value="1">
              <template #radio="{ checked }">
                <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                  <div className="custom-radio-card-mask">
                    <div className="custom-radio-card-mask-dot"></div>
                  </div>
                  <div className="custom-radio-card-title">正在审核</div>
                </div>
              </template>
            </a-radio>
            <a-radio :value="2">
              <template #radio="{ checked }">
                <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                  <div className="custom-radio-card-mask">
                    <div className="custom-radio-card-mask-dot"></div>
                  </div>
                  <div className="custom-radio-card-title">审核通过</div>
                </div>
              </template>
            </a-radio>
            <a-radio :value="3">
              <template #radio="{ checked }">
                <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                  <div className="custom-radio-card-mask">
                    <div className="custom-radio-card-mask-dot"></div>
                  </div>
                  <div className="custom-radio-card-title">审核驳回</div>
                </div>
              </template>
            </a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item field="manual" v-if="detail.state == 2" label="打款方式">
          <a-radio-group class="radio-bcg" v-model="detail.manual">
            <a-radio :value="1">
              <template #radio="{ checked }">
                <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                  <div className="custom-radio-card-mask">
                    <div className="custom-radio-card-mask-dot"></div>
                  </div>
                  <div className="custom-radio-card-title">人工打款</div>
                </div>
              </template>
            </a-radio>
            <a-radio :value="0">
              <template #radio="{ checked }">
                <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                  <div className="custom-radio-card-mask">
                    <div className="custom-radio-card-mask-dot"></div>
                  </div>
                  <div className="custom-radio-card-title">自动打款</div>
                </div>
              </template>
            </a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item field="remarks" label="提现备注">
          <a-input placeholder="请输入提现备注" v-model.trim="detail.remarks"
        /></a-form-item>
        <a-form-item :content-flex="false" v-if="num == 1" :merge-props="false">
          <a-button html-type="submit" :loading="loadings" type="primary" class="width100"
            >确认操作</a-button
          >
        </a-form-item>
        <div v-if="twoVisible == true">
          <a-form-item :content-flex="false" :merge-props="false" style="margin-bottom: 0">
            <a-row>
              <a-col :span="6"> 处理数量:{{ selectedKeys.length }} </a-col>
              <a-col :span="6"> 成功数量:{{ zong.success }} </a-col>
              <a-col :span="6"> 失败数量{{ zong.error }} </a-col>
            </a-row></a-form-item
          >
          <a-form-item style="margin-bottom: 10px">
            <a-progress
              :show-text="false"
              size="large"
              :percent="(zong.success + zong.error) / selectedKeys.length"
          /></a-form-item>
          <a-form-item>
            <div
              style="
                background-color: #f2f3f5;
                overflow-y: scroll;
                padding: 0 15px;
                height: 200px;
                width: 100%;
              "
            >
              <div v-for="item in errorList" :key="item">
                {{ item }}
              </div>
            </div></a-form-item
          >
        </div>
      </a-form>
      <template #footer>
        <a-space>
          <a-button v-if="num == 0" @click="cancel">取消</a-button>
          <a-button v-if="num == 0" :loading="loading1" type="primary" @click="OK">确定</a-button>
        </a-space>
      </template>
    </a-modal>
    <!-- 多卡搜索 -->
    <a-modal
      v-model:visible="cardsVisible"
      @before-close="colse"
      title="多条件搜索"
      width="400px"
      :mask-closable="false"
      title-align="start"
    >
      <a-textarea
        style="width: 100%"
        v-model="card"
        placeholder="请输入搜索条件，一行一个"
        allow-clear
      />
      <template #footer>
        <a-space>
          <a-button @click="cardsVisible = false">取消</a-button>
          <a-button type="primary" @click="cardsFn">确定</a-button>
        </a-space>
      </template>
    </a-modal>
    <!-- 提现文件 -->
    <a-modal
      v-model:visible="cardsVisible"
      @before-close="colse"
      title="提现文件"
      width="400px"
      :mask-closable="false"
      title-align="start"
    >
      <a-textarea
        style="width: 100%; height: 365px"
        v-model="card"
        placeholder="请输入搜索条件，一行一个"
        allow-clear
      />
      <template #footer>
        <a-space>
          <a-button @click="cardsVisible = false">取消</a-button>
          <a-button type="primary" @click="cardsFn">确定</a-button>
        </a-space>
      </template>
    </a-modal>
    <!-- 提现详情  -->
    <a-modal
      v-model:visible="detailV"
      title="提现详情"
      width="700px"
      :mask-closable="false"
      title-align="start"
    >
      <a-descriptions
        :column="2"
        bordered
        :label-style="{ color: 'black' }"
        :value-style="{ height: 200 }"
        title="基础信息"
      >
        <a-descriptions-item label="提现ID"> {{ DFORM.id }} </a-descriptions-item>

        <a-descriptions-item label="客户账号"> {{ DFORM.user.userName }} </a-descriptions-item>
        <a-descriptions-item label="提现途径">
          <span v-if="DFORM.type == 0">支付宝</span>
          <span v-if="DFORM.type == 1">微信</span>
          <span v-if="DFORM.type == 2">银行卡</span>
        </a-descriptions-item>
        <a-descriptions-item label="提现姓名">
          {{ DFORM.name }}
        </a-descriptions-item>
        <a-descriptions-item label="提现账号">
          {{ DFORM.accountNumber }}
        </a-descriptions-item>
        <a-descriptions-item label="其他信息">
          <span v-if="DFORM.type == 2">{{ DFORM.information }}</span>
          <a-image
            v-else-if="DFORM.information && DFORM.show == true"
            style="width: 20px; height: 100%"
            :src="
              urla + '/app/file/download/private?path=' + encodeURIComponent(record.information)
            "
          />
          <a-image style="width: 20px; height: 100%" v-else :src="DFORM.information" />
        </a-descriptions-item>
        <a-descriptions-item label="提现金额"> {{ DFORM.amount }}元 </a-descriptions-item>
        <a-descriptions-item label="手续费"> {{ DFORM.serviceCharge }}元 </a-descriptions-item>
        <a-descriptions-item label="代扣税"> {{ DFORM.withholdingTax }}元 </a-descriptions-item>
        <a-descriptions-item label="实际到账"> {{ DFORM.receiptBalance }}元 </a-descriptions-item>

        <a-descriptions-item label="提现状态">
          <a-tag color="gold" v-if="DFORM.state === 0">等待审核</a-tag>
          <a-tag color="blue" v-else-if="DFORM.state === 1">正在审核</a-tag>
          <a-tag color="green" v-if="DFORM.state === 2">通过审核</a-tag>
          <a-tag color="red" v-else-if="DFORM.state === 3">驳回</a-tag>
        </a-descriptions-item>
        <a-descriptions-item label="打款方式">
          <span v-if="DFORM.payTemplateId">自动打款</span>
          <span v-else>手动打款</span>
        </a-descriptions-item>
        <a-descriptions-item label="提现时间">
          {{ DFORM.createTime }}
        </a-descriptions-item>
        <a-descriptions-item label="处理时间">
          {{ DFORM.handlerTime }}
        </a-descriptions-item>
        <a-descriptions-item label="提现备注">
          <span v-if="DFORM.userRemarks">{{ DFORM.userRemarks }}</span>
          <span v-else>---</span>
        </a-descriptions-item>
        <a-descriptions-item label="处理备注">
          <span v-if="DFORM.adminRemarks">{{ DFORM.adminRemarks }}</span>
          <span v-else>---</span>
        </a-descriptions-item>
      </a-descriptions>
      <a-descriptions
        :column="2"
        bordered
        :label-style="{ color: 'black' }"
        :value-style="{ height: 200 }"
        title="其他信息"
      >
        <a-descriptions-item label="客户IP"> {{ DFORM.ip }} </a-descriptions-item>
        <a-descriptions-item label="支付名称">
          <span v-if="DFORM.payTemplat">{{ DFORM.payTemplate.name }}</span>
          <span v-else>---</span>
        </a-descriptions-item>
        <a-descriptions-item label="支付商户号">
          <span v-if="DFORM.payTemplat">{{ DFORM.payTemplate.merchantNo }}</span>
          <span v-else>---</span>
        </a-descriptions-item>
        <a-descriptions-item label="提现订单号">
          {{ DFORM.outTradeNo }}
        </a-descriptions-item>
        <a-descriptions-item label="商户订单号">
          <span v-if="DFORM.payTemplate">{{ DFORM.payTemplate.transactionNo }}</span>
          <span v-else>---</span>
        </a-descriptions-item>
        <a-descriptions-item label="交易订单号">
          {{ DFORM.transactionNo }}
        </a-descriptions-item>
      </a-descriptions>
      <template #footer>
        <a-space>
          <!-- <a-button @click="cardsVisible = false">取消</a-button>
          <a-button type="primary" @click="cardsFn">确定</a-button> -->
        </a-space>
      </template>
    </a-modal>
    <!-- 打款文件 -->
    <a-modal
      v-model:visible="dakuan"
      title="打款文件"
      width="560px"
      :mask-closable="false"
      title-align="start"
    >
      <a-alert style="background-color: #e8f7ff" :show-icon="false">
        <span style="color: #3491fa !important"
          >打款文件仅导出提现途径为支付宝的，导出的文件可以直接在支付宝批量打款</span
        ></a-alert
      >
      <a-alert
        style="margin-top: 20px; background-color: #e8f7ff; color: #3491fa !important"
        :show-icon="false"
      >
        <span style="color: #3491fa !important">
          如果不搜索提现状态是什么状态都将会被导出，可以搜索提现状态再进行导出</span
        ></a-alert
      >
      <template #footer>
        <a-space>
          <a-button @click="dakuan = false">取消</a-button>
          <a-button type="primary" @click="exportListFn">确定</a-button>
        </a-space>
      </template>
    </a-modal>
  </div>
</template>

<script lang="ts" setup>
  import { formpost, get } from '@/api/http'
  import useCommonStore from '@/store/modules/common'
  import { withdrawalList, handler, withdrawalLists } from '@/api/url'
  import { usePagination, useRowKey, useTable, useTableHeight } from '@/hooks/table'
  import { getCurrentInstance, onMounted, reactive, ref } from 'vue'
  import { Message } from '@arco-design/web-vue'
  const dakuan = ref(false)
  const selectedKeys: any = ref([])
  const rowSelection = reactive({
    type: 'checkbox',
    showCheckedAll: true,
    onlyCurrent: false,
  })
  const errorList = ref([])
  const twoVisible = ref(false)
  const urla = ref(window.location.protocol + '//' + window.location.host)
  const typeLists = ref([
    {
      name: '提现订单号',
      value: 'outTradeNo',
    },
    {
      name: '交易订单号',
      value: 'transactionNo',
    },
    {
      name: '提现姓名',
      value: 'name',
    },
    {
      name: '提现账号',
      value: 'accountNumber',
    },
    {
      name: '发起提现IP',
      value: 'ip',
    },
  ])
  const scroll = {
    x: 1500,
  }
  const userList: any = ref([])
  const type: any = ref('outTradeNo')
  const typeText: any = ref('')
  const form = reactive({
    userId: '', //            客户ID
    payTemplateId: '', //            支付模板ID
    type: '', //            提现类型 0支付宝 1微信 2银行卡
    manual: '', //           true 手动处理 false自动打款
    outTradeNo: '', //           提现订单号
    transactionNo: '', //           交易订单号
    name: '', //           收款人姓名
    accountNumber: '', //   收款账号
    states: '', //          提现状态 0等待 1正在 2通过 3驳回
    ip: '', //           ip
    addTime: '', //         申请提现时间开始
    endTime: '', //         申请提现时间结束
    addHandlerTime: '', //    处理提现时间开始
    endHandlerTime: '', //   处理提现时间结束
    addAmount: '', //   开始提现金额
    endAmount: '', //   结束提现金额
    addServiceCharge: '', //  手续费开始
    endServiceCharge: '', // 手续费结束
    addWithholdingTax: '', // 代扣税开始
    endWithholdingTax: '', // 代扣税结束
    addReceiptBalance: '', // 实际到账金额开始
    endReceiptBalance: '', // 实际到账结束
  })
  function typeFn() {
    // for (var key in form) {
    //   if (key !== type.value) {
    //     form[key] = ''
    //   }
    // }
    form.ip = ''
    form.accountNumber = ''
    form.name = ''
    form.transactionNo = ''
    form.outTradeNo = ''
  }
  const showV = ref(false)
  const tables = reactive({
    tableLoading: false,
    bordered: false,
    striped: false,
    expand: [1],
    isExpand: false,
  })
  const onUpdateBorder = (isBordered: boolean) => {
    tables.bordered = isBordered
  }
  function onUpdateStriped(isStriped: boolean) {
    tables.striped = isStriped
  }
  const showRef = ref()
  const userCommon = useCommonStore()

  const table = useTable()
  const rowKey = useRowKey('id')
  const pagination = usePagination(doRefresh)
  const tableColumns: any = reactive({
    list: [
      {
        title: '提现ID',
        key: 'id',
        dataIndex: 'id',
        checked: true,
        width: 120,
      },
      {
        title: '客户账号',
        key: 'userName',
        dataIndex: 'userName',
        checked: true,
        width: 130,
      },
      {
        title: '提现姓名',
        key: 'name',
        dataIndex: 'name',
        checked: true,
        width: 120,
      },
      {
        title: '提现账号',
        key: 'accountNumber',
        dataIndex: 'accountNumber',
        checked: true,
        width: 220,
      },
      {
        title: '其他信息',
        key: 'other',
        dataIndex: 'other',
        checked: true,
        width: 100,
      },
      {
        title: '提现途径',
        key: 'type',
        dataIndex: 'type',
        checked: true,
        width: 120,
      },
      {
        title: '提现金额',
        key: 'amount',
        dataIndex: 'amount',
        checked: true,
        width: 120,
      },
      {
        title: '手续费',
        key: 'serviceCharge',
        dataIndex: 'serviceCharge',
        checked: true,
        width: 120,
      },
      {
        title: '代扣税',
        key: 'withholdingTax',
        dataIndex: 'withholdingTax',
        checked: true,
        width: 120,
      },
      {
        title: '实际到账',
        key: 'receiptBalance',
        dataIndex: 'receiptBalance',
        checked: true,
        width: 120,
      },
      {
        title: '打款方式',
        key: 'payTemplateId',
        dataIndex: 'payTemplateId',
        checked: true,
        width: 120,
      },
      {
        title: '提现状态',
        key: 'state',
        dataIndex: 'state',
        checked: true,
        width: 120,
      },
      {
        title: '提现时间',
        key: 'createTime',
        dataIndex: 'createTime',
        checked: true,
        width: 190,
      },
      {
        title: '处理时间',
        key: 'handlerTime',
        dataIndex: 'handlerTime',
        checked: true,
        width: 190,
      },
      {
        title: '客户备注',
        key: 'userRemarks',
        dataIndex: 'userRemarks',
        checked: true,
        width: 120,
      },
      {
        title: '处理备注',
        key: 'adminRemarks',
        dataIndex: 'adminRemarks',
        checked: true,
        width: 120,
      },
      {
        title: '操作',
        key: 'action',
        dataIndex: 'action',
        checked: true,
        width: 120,
        fixed: 'right',
      },
    ],
  })
  const loading1 = ref(false)
  const card = ref('')
  const cardsVisible = ref(false)
  const ast = ref(0)
  const tableLoading = ref(true)
  const loading = ref(false)
  const detailV = ref(false)
  const num = ref(0)
  const detail = ref({
    id: '',
    state: 2, // 处理状态 0等待 1正在 2通过 3驳回
    remarks: '', //备注
    manual: 1, //true手动处理  1自动打款
  })
  const DFORM: any = ref({ user: { userName: '' }, payTemplate: {} })
  const colse = () => {
    ast.value = 0
    cardsVisible.value = false
  }
  const opens = (val: any) => {
    ast.value = val
    cardsVisible.value = true
  }
  function cardsFn() {
    const arr = card.value.split(/\n/g)
    typeText.value = arr.toString()
    cardsVisible.value = false
  }
  function twoClose() {
    clearInterval(setTimeOut.value)
    twoVisible.value = false
  }
  const exportLists = () => {
    loading.value = true
    Object.keys(form).forEach(function (key: any) {
      if (key == type.value) {
        form[key] = typeText.value
      }
    })
    // form.states = form.states.toString()
    userCommon.downLoads(withdrawalLists, form, '提现列表').then(() => {
      loading.value = false
    })
  }
  const detailFn = (val: any) => {
    DFORM.value = JSON.parse(JSON.stringify(val))
    detailV.value = true
  }
  const zong = ref({
    success: 0,
    error: 0,
  })
  const set: any = ref({})
  const setTimeOut = ref()
  const count = ref(0)
  //提交申请
  const OK = () => {
    showRef.value.validate((error: any) => {
      if (!error) {
        loading1.value = true
        if (num.value == 0) {
          formpost({
            url: handler,
            data: { ...detail.value },
          })
            .then((res) => {
              if (res.code == 0) {
                loading1.value = false
                Message.success(res.msg)
                doRefresh()
                cancel()
              }
            })
            .catch(() => {
              loading1.value = false
            })
        } else {
          // SSE()
          loading1.value = false
          twoVisible.value = true
          errorList.value = []
          zong.value = {
            success: 0,
            error: 0,
          }
          count.value = 0
          set.value = JSON.parse(JSON.stringify(detail.value))
          setTimeOut.value = setInterval(() => {
            if (count.value < selectedKeys.value.length) {
              set.value.id = selectedKeys.value[count.value]
              // 请求接口
              requestApi(handler, selectedKeys.value[count.value])
              count.value++ // 增加计数器
            } else {
              // 请求次数达到列表长度，清除定时器并停止
              clearInterval(setTimeOut.value)
            }
          }, 3000)
        }
      }
    })
  }

  function requestApi(item: any, card: any) {
    // 这里放置你的请求代码，item是列表中的元素
    const formData = new FormData()
    formData.append('remarks', set.value.remarks)
    formData.append('manual', set.value.manual)
    formData.append('state', set.value.state)
    formData.append('id', set.value.id)
    fetch(item, {
      method: 'POST',
      body: formData,
    })
      .then((response) => response.json())
      .then((res) => {
        if (res.status == true) {
          zong.value.success++
        } else {
          zong.value.error++
        }
        errorList.value.unshift(card + ':' + res.msg)
      })
      .catch((error) => console.log('Error:', error))
  }

  const open = (val: any, number: any) => {
    num.value = number
    detail.value = {
      id: '',
      state: 2, // 处理状态 0等待 1正在 2通过 3驳回
      remarks: '', //备注
      manual: 1, //true手动处理  1自动打款
    }
    if (number == 0) {
      if (val.state == 2) {
        Message.error('当前提现已处理，不能进行重复操作')
      } else {
        detail.value.id = val.id
        DFORM.value = JSON.parse(JSON.stringify(val))
        showV.value = true
      }
    } else {
      if (selectedKeys.value.length <= 0) {
        Message.error('请选中操作项')
      } else {
        showV.value = true
      }
    }
  }
  const cancel = () => {
    showRef.value?.resetFields()
    num.value = 0
    twoClose()
    doRefresh()
    showV.value = false
  }

  function doRefresh(value?: number) {
    // eslint-disable-next-line prettier/prettier
    tableLoading.value = true
    if (value) {
      pagination.page = value
    }
    Object.keys(form).forEach(function (key: any) {
      if (key == type.value) {
        form[key] = typeText.value
      }
    })
    get({
      url: withdrawalList,
      data: {
        page: pagination.page,
        size: pagination.pageSize,
        ...form,
      },
    })
      .then((res) => {
        tableLoading.value = false
        res.data.list.forEach((item: any) => {
          if (item.information) {
            item.show = item.information.includes('private')
          } else {
            item.show = false
          }
        })
        table.handleSuccess(res.data.list)
        pagination.setTotalSize((res.data as any).totalSize)
      })
      .catch(console.log)
  }

  const serchForm = ref()
  const resetSeach = () => {
    serchForm.value?.resetFields()
    form.addAmount = '' //   开始提现金额
    form.endAmount = '' //   结束提现金额
    form.addServiceCharge = '' //  手续费开始
    form.endServiceCharge = '' // 手续费结束
    form.addWithholdingTax = '' // 代扣税开始
    form.endWithholdingTax = '' // 代扣税结束
    form.addReceiptBalance = '' // 实际到账金额开始
    form.endReceiptBalance = '' // 实际到账结束
    doRefresh(1)
  }
  function getList() {
    userCommon.userLists().then((res: any) => {
      userList.value = res.data
      console.log(userList)
    })
  }
  const templateS: any = ref([])
  function getLists() {
    userCommon.templatesListFn(true).then((res: any) => {
      templateS.value = res.data
    })
  }

  function exportListFn() {
    dakuan.value = false
    // userCommon.downLoadPosts()
    Object.keys(form).forEach(function (key: any) {
      if (key == type.value) {
        form[key] = typeText.value
      }
    })
    userCommon.downLoads('/app/withdrawal/export2', form, '打款文件').then(() => {
      // loading.value = false
    })
  }

  onMounted(async () => {
    table.tableHeight.value = await useTableHeight(getCurrentInstance())
    doRefresh()
    getList()
    getLists()
  })
</script>
<style lang="less" scoped>
  :deep(.arco-modal) {
    .arco-modal-footer {
      text-align: right !important;
    }
  }
  :deep(.arco-modal-header .arco-modal-title) {
    display: flex;
    justify-content: flex-start !important;
  }
  :deep(.arco-table-td-content button) {
    padding: 0px !important;
    margin-right: 8px;
  }
  :deep(.arco-table-td-content button) {
    padding: 0px !important;
    margin-right: 8px;
    background: none !important;
  }

  .huakaClass :deep(.arco-form-item-message) {
    margin-left: 42px !important;
  }
</style>
